<template>
  <div id="introduce">
    <!-- 项目栏 -->
    <div class="person-wrap" ref="personWrap">
      <ul class="person-list" ref="personTab">
        <li
          class="person-item"
          v-bind:class="{ itemcur: item.id == tagbordershow }"
          v-for="(item, index) in this.tagdata.results"
          :ref="item.id"
          :key="index"
        >
          <a @click="videodataq(item)">
            <img :src='/pic&video/+item.pic' alt="" />
            <span class="tittle">{{ item.event }}</span>
          </a>
        </li>
      </ul>
    </div>

    <!-- 视频栏 -->

    <router-link :to="{ path: '/EventDetails', query: { id: this.videodata.id } }">
      <div class="video">
        <div style="margin: 0 10px 0">
     
            <video
              :src="/pic&video/ + videodata.video"
              controls
              style="width: 100%"
              poster="/pic&video/shiping.jpg"
            ></video>
            <p style="text-indent: 1rem; line-height: 20px">
              {{ this.videodata.info }}
              <span class="link">【更多】</span>
            </p>
         
        </div>
      </div>
    </router-link>

    <!-- 赛区场馆 -->
    <div class="area">
      <div class="caption">
        <h1>赛区场馆</h1>
        <div style="padding-top: 10px">
          <van-image width="100%" :src="/pic&video/ + this.areaddata.pic" />
          <p class="title">{{ this.bisaicg.stadium }}</p>
          <p style="text-indent: 1rem">
            {{ this.bisaicg.info }}
          </p>
        </div>
      </div>
    </div>

    <!-- 比赛场地 -->
    <div class="place" style="padding-top: 5px">
      <div class="caption">
        <h1>比赛场地</h1>
        <div style="padding-top: 10px">
          <van-image width="100%" :src="/pic&video/ + this.bisaicg.map" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//import BScroll from "better-scroll"; //导入better-scroll
import $http from "../helper/http.js";
import { Notify } from "vant";
export default {
  data() {
    return {
      tagdata: [], //最上面tag变量数组
      tagbordershow: 1,
      videodata: {}, //视频变量的数组
      areaddata: [], //赛区场馆的数组
      bisaicg: [], //最下面比赛场地的数组
    };

  },
  created() {
    // this.$nextTick(() => {
    //   // 使用 this.$nextTick 为了确保组件已经渲染完毕
    //   this.scroll = new Bscroll(this.$refs.wrapper , {click:true}); // 实例化BScroll接受两个参数，第一个为父盒子的dom节点
    // });
  },
  mounted() {
    // 加载最上面的tag
    $http.get("http://localhost:3000/event", "").then((res) => {
      if (res.data.message == "ok") {
        // console.log(res.data);
        Notify({ type: "success", message: "数据加载成功" });
        this.tagdata = res.data; //将数据绑定到变量上
        console.log(this.tagdata);
        this.videodata = this.tagdata.results[0]; //给视频绑定初始数据，加载文字及视频,赋值到视频变量的数组
        console.log(this.videodata);
        this.videodataq(this.videodata); //给赛区场馆绑定初始数据
      } else {
        Notify({ type: "warning", message: "未获取到数据" });
      }
    });
  },
  methods: {
    videodataq(vdata) {
      this.videodata = vdata; //将点击tag里面的行数据赋值给vidio的数组变量
      this.tagbordershow = vdata.id;
      //this.scroll.scrollToElement(document.querySelector('.person-list li:nth-child(' + 1 + ')'), null, true, true)
      $http
        .get(
          "http://localhost:3000/stadiumforevent?s_id=" + this.videodata.s_id,
          ""
        ) //根据id获取一个赛区场馆
        .then((res) => {
          if (res.data.message == "ok") {
            //判断数据返回值是否为OK
            // console.log(res.data);
            this.areaddata = res.data.results[0]; //给赛区场馆绑定初始数据
            this.bisaicg = res.data.results[0]; //给赛区场馆绑定数据
          } else {
            Notify({ type: "warning", message: "未获取到数据" });
          }
        });
    },

    onClickLeft(vdata) {},
    onClickRight() {},
  },
  watch: {

  },
};
</script>

<style scoped>
#introduce {
  text-align: center;
  width: 100%;
  margin-bottom: 50px;
}
/* 项目类别点击时边框高亮 */
.person-wrap .person-list .itemcur {
  color: #0f68c1;
}
.person-wrap .person-list .itemcur img {
  border-color: #0f68c1;
}
/* 视频介绍 */
.video {
  font-size: 13px;
  border-bottom: 5px solid #e9e7f2;
  color: black;
}
.person-item {
  width: 180px;
}

/* 项目描述 */
.link {
  font-size: 13px;
  color: blue;
}

.caption {
  margin: 0 10px 0;
}
.caption h1 {
  padding-bottom: 0.17rem;
  padding-top: 5px;
  font-size: 20px;
  color: #252a36;
  margin: 0;
  font-style: italic;
  background-image: url(/xmjs/005.png);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: 16px 22px;
  padding-left: 15px;
}
.order {
  color: black;
  font-size: 25px;
  font-weight: bold;
}
.area {
  padding-bottom: 15px;
  border-bottom: 5px solid #e9e7f2;
}

/* 项目类别 */
.person-list img {
  width: 50px;
  height: 50px;
  margin-bottom: 0.1rem;
  border-radius: 50%;
  border: 0.02rem solid transparent;
}
.person-list li {
  min-width: 65px;
  min-height: 100px;
  font-size: 5px;
  text-align: center;
  padding-left: 10px;
  margin-bottom: 0.1rem;
}
.person-list li .tittle {
  height: 20px;
  min-height: 50px;
  font-size: 14px;
}

.person-list {
  display: flex;
  align-items: flex-end;
  height: 100px;
  max-height: 100px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  border-bottom: 1px solid #e9e7f2;
  padding-top: 18px;
}
.person-wrap ::-webkit-scrollbar {
  display: none;
}
</style>